import React from 'react';
import { Card, Form, Alert, Row, Col, Input, Button, Table, Radio } from 'antd';
import { FormInstance } from 'antd/lib/form';

import qqimg from '@/assets/image/支付宝付款.png';


const dataSource = [
	{
		key: 1,
		name: '一般企业预算：2,000元/月 - 10,000元/月',
		age: '新产品上市预算：5,000元/月 - 20,000元/月',
		address: '金融公司行业预算：10,000元/月 - 50,000元/月' 
	},
	{
		key: 2,
		name: '教育培训预算：3,000元/月 - 30,000元/月',
		age: '新闻发布会预算：8,000元/次 - 20,000元/次',
		address: '负面压制行业预算：10,000元/月 - 30,000元/月' 
	},
	{
		key: 3,
		name: '房产家居预算：3,000元/月 - 20,000元/月',
		age: '医疗健康行业预算：6,000元/月 - 20,000元/月',
		address: '上市公司行业预算：5,000元/月 - 30,000元/月' 
	}
];

const columns = [
	{
	    title: '可参考一般行业客户投放预算表',
	    dataIndex: 'name',
	    key: 'name',
	    colSpan: 3,
	    align: 'center'
	},
	{
	    title: '姓名',
	    dataIndex: 'age',
	    key: 'age',
	    colSpan: 0,
	    align: 'center'
	},
	{
	    title: '姓名',
	    dataIndex: 'address',
	    key: 'address',
	    colSpan: 0,
	    align: 'center'
	},
];

const options = [
	{ label: '100元', value: '100' },
	{ label: '200元', value: '200' },
	{ label: '300元', value: '300' },
	{ label: '500元', value: '500' },
	{ label: '1000元', value: '1000' },
	{ label: '2000元', value: '2000' }
];

const newOptions = [
	{ label: <> <img src={qqimg} style={{width: 24,height: 24}}/> </>, value: '支付宝' }
];

const buttonItemLayout = {
	wrapperCol: { span: 20, offset: 4 }
}

export default class Rechage extends React.Component {
	formRef = React.createRef<FormInstance>();
    render(){
        return (
            <div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
            	<Card title="账户充值" bordered={false} style={{ width: '100%' }}>
            		<div style={{width: 600,marginBottom: 50}}>
	            		<Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} ref={this.formRef}>
	            			<Form.Item
	                            label="账户余额"
	                        >
	                         	<span>￥4.00</span>
	                        </Form.Item>
	                        <Form.Item
	                            label="支付方式"
	                        >
	                         	<Radio.Group
						          options={newOptions}
						        />	                        
						    </Form.Item>
	                        <Form.Item
	                            label="充值金额"
	                            name="value"
	                        >
	                         	<Input prefix="￥" suffix="RMB" />
	                        </Form.Item>
	                        <Form.Item {...buttonItemLayout}>
	                        	<Radio.Group
						          options={options}
						          optionType="button"
						        />
	                        </Form.Item>
	                        <Form.Item {...buttonItemLayout}>
	                        	<Button type="primary">立即充值</Button>
	                        </Form.Item>
	            		</Form>
            		</div>
            		<Alert style={{marginBottom: 10}} message="温馨提醒：根据历史投放经验，为达到更好的效果，单个活动建议2000元投起。在线自助充值秒到账户余额，可立即使用开始发稿！" type="info" showIcon />
            		<Table dataSource={dataSource} columns={columns} pagination={false}/>
            	</Card>
            </div>
        )
    }
}